<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>房贷计算器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 20px;
        }

        h1 {
            text-align: center;
            color: #333;
        }

        form {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            max-width: 600px;
            margin: 0 auto;
        }

        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        select, input[type="text"], textarea {
            width: calc(100% - 20px);
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
            box-sizing: border-box;
        }

        button {
            background-color: #28a745;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            margin-right: 5px;
        }

        button:hover {
            background-color: #218838;
        }

        .result-section {
            margin-top: 20px;
            background-color: #e9ecef;
            padding: 15px;
            border-radius: 4px;
        }

        .result-section input {
            background-color: #f9f9f9;
            cursor: not-allowed;
        }

        hr {
            border: 0;
            height: 1px;
            background-color: #ccc;
            margin: 20px 0;
        }
    </style>
    <script>
        function jisuanfangshichange(v){
            if(v=="2"){
                document.querySelector('#jisuanfangshi1').style.display = 'block';
                document.querySelector('#jisuanfangshi2').style.display = 'none';
            }else{
                document.querySelector('#jisuanfangshi1').style.display = 'none';
                document.querySelector('#jisuanfangshi2').style.display = 'block';
            }
        }
    </script>
</head>
<body>
    <h1>房贷计算器_公积金,商贷,组合贷利率在线计算工具</h1>
    <form>
        <label for="loanType">贷款类别</label>
        <select name="" id="loanType">
            <option value="1">公积金贷款</option>
            <option value="2">商业贷款</option>
            <option value="3">组合贷款</option>
        </select>

        <label for="repaymentMethod">还款方式</label>
        <select name="" id="repaymentMethod">
            <option value="1">等额本息</option>
            <option value="2">等额本金</option>
        </select>

        <label for="calculationMethod">计算方式</label>
        <select name="" id="calculationMethod" onchange="jisuanfangshichange(this.value)">
            <option value="1" id="">根据按揭成数计算</option>
            <option value="2" id="">根据贷款总额计算</option>
        </select>

        <label for="totalPrice" id="jisuanfangshi1">房屋总价</label>
        <input type="text" id="totalPrice">万元
        <label for="totalPrice" id="jisuanfangshi2">贷款总价<input type="text" id="totalPrice">万元</label>
        

        <label for="daikuanyeaars">按揭年数</label>
        <select name="" id="daikuanyeaars">
            <script>
                let daikuanyeaars = document.querySelector('#daikuanyeaars');
                for(let i = 1; i <= 30; i++) {
                    // 创建option元素
                    let option = document.createElement('option');
                    // 设置option元素的value和text
                    option.value = i;
                    option.text = i + '年（' + (i * 12) + '期）';
                    // 添加到select元素中
                    daikuanyeaars.appendChild(option);
                }
            </script>
        </select>

        <label for="interestRate">商贷利率</label>
        <input type="text" id="interestRate">%

        <button>房贷计算</button>
        <button>清空重填</button>

        <h2 style="margin-top: 20px;">计算结果</h2>
        <label for="totalAmount">总还款金额</label>
        <input type="text" id="totalAmount">万元
        <label for="totalPriceResult">房款总额</label>
        <input type="text" id="totalPriceResult">万元
        <label for="downPayment">首付款</label>
        <input type="text" id="downPayment">万元
        <label for="loanAmount">贷款总额</label>
        <input type="text" id="loanAmount">万元
        <label for="totalInterest">支付利息</label>
        <input type="text" id="totalInterest">万元
        <label for="totalMonths">贷款月数</label>
        <input type="text" id="totalMonths">个月
        <label for="monthlyPayment">月均还款</label>
        <input type="text" id="monthlyPayment">万元
        <label for="monthlyDetails">月均金额</label>
        <textarea name="" id="monthlyDetails"></textarea>
    </form>
    <hr>
    <p>最新房贷商业贷款基准利率4.90%，公积金利率3.25%</p>
</body>
</html>
